@use 'prism-theme-vars/base.css';
@use 'prism-theme-vars/marker.css';

:root {
  --prism-builtin: #3182bd;
  --prism-comment: #848486;
  --prism-deleted: #3182bd;
  --prism-function: #6196cc;
  --prism-boolean: #c25205;
  --prism-number: #c25205;
  --prism-property: #717c11;
  --prism-punctuation: #a8a9cc;
  --prism-keyword: #c792ea;
  --prism-variable: #0b8235;
  --prism-url-decoration: #67cdcc;
  --prism-symbol: green;
  --prism-selector: #0b8235;
}

html {
  &:not(.dark) {
    .main {
      .vp-doc {
        .language-vue {
          background-color: #f5f7fa;
        }
      }
    }
  }
}

.main {
  .vp-doc {
    .el-pager li {
      margin: 0;
    }
    .language-vue {
      margin: 0;
      border-radius: 0;
      overflow-y: hidden;
      padding-top: 10px;

      pre {
        font-family: monospace, monospace;
        font-size: 1em;
        overflow: unset;
      }

      code {
        padding: 0;
        line-height: 1.4;
        font-size: 14px;
        color: #303133;
      }
    }
    .plus-steps-form .el-steps {
      line-height: initial;
    }
  }
}
